<template>
  <!--<div>
      Mouse position: x {{ x }} / y {{ y }}
    </div>-->
  <publicList
      id="mask_modal"
      ref="publicListRef"
      @toolChange="toolChange"
      :toolList="toolList.toolList"
      :paramsList="toolList.paramsList"
      :selectNums="ids.length"
      :queryParams="toolList.queryParams"
      @searchSubmit="searchSubmit"
      :total="total"
      @paginate="handlePaginateFun"
      :tableData="toolList.tableDataList"
      :columns="toolList.tableItem"
      :loading="loading"
      rowKey="uuid"
      @handleSelectionChange="handleSelectionChange"
  >
    <template v-slot:tableHead="head">
      {{ head.item.label }}
    </template>
    <template v-slot:tableColumn="scope">
      <span v-if="scope.scope.prop=='approveStatus'">
        {{ toolList.statusObj[scope.scope.row.approveStatus] }}
      </span>
      <span v-else>{{ scope.scope.row[scope.scope.prop] }}</span>
    </template>
  </publicList>
  <!--  <useModel></useModel>-->
</template>

<script>
import {ref, reactive, computed, getCurrentInstance, watch, defineAsyncComponent, onMounted} from "vue"
import {useRouter} from "vue-router";

import {
  getSupplierList,
  revocationCustomer,
} from "@/api/customer"
import {getDictionaryValueListmore} from "@/api/rules"
import htmlToPdf from '@/utils/htmlToPdf'
import {useMouse} from "./mouse";
import {tableMixin} from "@/mixins/tableMixin.js"
import useModel from "@/components/modal/modal"
import {getBrandList} from "@/api/brand";

export default {
  name: "supplier",
  components: {
    // useModel
  },
  setup() {
    const {proxy} = getCurrentInstance()
    const router = useRouter();

    const toolList = reactive({
      toolList: [
        {id: "3", label: "新增", ismul: false},
      ],
      paramsList: [
        {
          label: '审批状态',
          props: 'approveStatus',
          queryonce: true,
          type: '3',
          queryList: [{label: '待审批', value: '2'}, {label: '暂存', value: '1'}]
        },
        {label: '供应商类型', props: 'supplierType', queryonce: false, type: '2', queryList: []},
        {label: '供应商标签', props: 'developLevel', queryonce: false, type: '2', queryList: []},
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        status: '',
        supplierType: [],
        developLevel: [],
      },
      tableDataList: [],
      tableItem: [
        {label: '审批状态', prop: 'approveStatus', align: 'left', width: '100'},
        {label: '供应商编码', prop: 'supplierNum', align: 'left'},
        {label: '供应商', prop: 'supplierName', align: 'left', width: '200'},
        // { label: '报价币种', prop: 'quotationCurrency', align:'left' },
        {label: '当地供应商名称', prop: 'localSupplierName', align: 'left'},
        {label: '供应商类型', prop: 'supplierType', align: 'left', width: '120'},
        {label: '简称', prop: 'simpleName', align: 'left'},
        {label: '集团', prop: 'companies', align: 'left'},
        {label: '供应商标签', prop: 'developLevel', align: 'left'},
        {label: '国家/城市', prop: 'countryCity', align: 'left'},
        {label: '创建人', prop: 'createNickName', align: 'left', width: '60'},
        {label: '创建日期', prop: 'createTime', align: 'left', width: '110'},
        {label: '更新人', prop: 'updateNickName', align: 'left', width: '60'},
        {label: '更新日期', prop: 'updateTime', align: 'left', width: '110'}
      ],
      statusObj: {'1': '暂存', '2': '待审批', '3': '已审批'},
    });
    const {x, y} = useMouse()
    const $modal = getCurrentInstance()?.appContext.config.globalProperties.$modal

    const getDictionary = () => {
      getDictionaryValueListmore({}).then(res => {
        if (res.code == 200) {
          let datalistmain = res.data
          datalistmain.supplierTag.forEach((item) => {
            item.label = item.dictValueName
            item.value = item.dictValueName
          })
          toolList.paramsList[2].queryList = datalistmain.supplierTag
          datalistmain.supplierType.forEach((item) => {
            item.label = item.dictValueName
            item.value = item.dictValueName
          })
          toolList.paramsList[1].queryList = datalistmain.supplierType
        }
      })
    }
    getDictionary();
    const toolChange = (toolIndex) => {
      let data = {
        idArr: ids.value
      }
      console.log(toolIndex)
      if (toolIndex == '3') {
       router.push({
          path: "/supplierAdd",
          query: {
            type: "add"
          }
        })
        /*$modal.open('加入成功');
        setTimeout(()=>{
          $modal.cancel();
        },1500)*/
      } else if (toolIndex == '4') {
        if (ids.value.length <= 0) {
          proxy.$message({
            type: "error",
            message: "请选择需要撤销的数据"
          });
          return false
        }
        proxy.$message({
          type: "success",
          message: "撤销成功"
        });
      } else if (toolIndex == '5') {
        return false
      } else if (toolIndex == '6') {
        return false
        // 调用htmlToPdf工具函数
        htmlToPdf.getPdf('pdfDom', '文档名称');
        // 定时器模拟按钮loading动画的时间
        setTimeout(() => {


        }, 1000);

      } else if (toolIndex == '7') {

      }
    }
    let {
      ids,
      loading,
      publicListRef,
      getTableData,
      total,
      tableDataList,
      searchSubmit,
      handlePaginateFun,
      handleSelectionChange
    } = tableMixin({
      getListApi: getSupplierList,
      queryParams:toolList.queryParams,
      getListCallBack(res) {
        total.value = res.data.total;
        toolList.tableDataList =res.data.supplierList;
      },
    })
    onMounted(() => {
      getTableData()
    })
    return {
      toolList,
      total,
      publicListRef,
      loading,
      ids,
      x, y,
      toolChange,
      searchSubmit,
      handlePaginateFun,
      handleSelectionChange
    }
  },
  created() {
  },
  mounted() {
  },

  methods: {},
  computed: {},
  watch: {},
  beforeDestroy() {
  },
  destroyed() {
  }
}
</script>

<style scoped lang="scss">

</style>